<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="to">
        <div class="top">
            <ul class="top-1">
                <li><a href="#">小米网</a></li><li class="fenge">|</li>
                <li><a href="#">MIMU</a></li><li class="fenge">|</li>
                <li><a href="#">米聊</a></li><li class="fenge">|</li>
                <li><a href="#">游戏</a></li>
                <li><a href="#">多看阅读</a></li><li class="fenge">|</li>
                <li><a href="#">小米移动版</a></li><li class="fenge">|</li>
                <li><a href="#">Select region</a></li><li class="fenge">|</li>
                <li><a href="#">米粉节答疑</a></li></ul> 
               <ul class="top-2">
                <li class="right" ><a href="">注册</a></li><li class="fenge right">|</li>
                <li class="right" ><a href="login.html">登陆</a></li>
            </ul>
           </div>
    </div>

    <div class="container">
        <div class="logo"><img src="images/logo.png" alt=""></div>
        <div class="lg-r">
            <span> <img src="images/clock.png" alt=""></span><span>4月14日开放购买</span> <br>
            <input type="text" placeholder="搜索您想要的商品" class="in-t"> <button class="in-t-1" ><img src="images/fangdajing.png" alt=""></button> <span class="int-t-2">小米手环 耳机音响 保护壳</span> <button class="in-t-t-3"><img src="images/shopcar.png" alt=""> 购物车</button>
    </div>

    <div class="comtainer-1">
        <div class="co-left">
            <div class="one">
                <p>全部商品分类</p>
            </div>
            <div class="two">
                <p class="two-1">购买手机</p>
                <p class="two-2">小米Noto 小米4 红米 红米Note</p>
            </div>
            <div class="two">
                <p class="two-1">购买电视与平板</p>
                <p class="two-2">小米电视 小米盒子 小米平板</p>
            </div>
            <div class="two">
                <p class="two-1">路由器与智能硬件</p>
                <p class="two-2">路由器 体重秤 净化器与滤芯</p>
            </div>
            <div class="two">
                <p class="two-1">插线板、移动电源与电池</p>
                <p class="two-2">小米移动电源 电池 充电器</p>
            </div>
            <div class="two">
                <p class="two-1">耳机音响与存储卡</p>
                <p class="two-2">小米头戴式耳机 小米活塞耳机</p>
            </div>
            <div class="two">
                <p class="two-1">保护套与贴膜</p>
                <p class="two-2">保护套/保护壳 贴膜 防尘塞</p>
            </div>
            <div class="two">
                <p class="two-1">后盖与个性化配件</p>
                <p class="two-2">米键 后盖 贴纸 手机支架</p>
            </div>
            <div class="two">
                <p class="two-1">小米生活方式</p>
                <p class="two-2">服装 米兔 背包 生活周边</p>
            </div>
           
            
        </div>
        <div class="co-right">
            <ul class="nav">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">小米平板</a></li>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">盒子</a></li> 
                    <li><a href="#">路由器</a></li> 
                    <li><a href="#">合约机</a></li> 
                    <li><a href="#">服务</a></li> 
                    <li><a href="#">社区</a></li> 
            </ul>
             
            <div id="carousel-id" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-id" data-slide-to="0" class=""></li>
                    <li data-target="#carousel-id" data-slide-to="1" class=""></li>
                    <li data-target="#carousel-id" data-slide-to="2" class=""></li>
                    <li data-target="#carousel-id" data-slide-to="3" class=""></li>
                    <li data-target="#carousel-id" data-slide-to="4" class="active"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item">
                        <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="images/banner5.png">
                    
                    </div>
                    <div class="item">
                        <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner4.png">
                     
                    </div>
                    <div class="item">
                        <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner3.png">
                     
                    </div>
                    <div class="item">
                        <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="images/banner2.png">
                     
                    </div>
                    <div class="item active">
                        <img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="images/banner1.png">
                
                    </div>
                </div>
                <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
           

            <div class="con">
            <div class="row">
                <div class="col-4">
                    <img src="images/01.png" alt="">
                </div>
                <div class="col-4">
                    <img src="images/02.png" alt="">
                </div>
                <div class="col-4">
                    <img src="images/03.png" alt="">
                </div>
            </div>
           </div>
        </div>
    </div>

     
    <ul class="c-title">
        <li class="c-title1">小米明星商品</li>
        <li class="c-title2">根据机型选配件</li>
        <span class="c-title3"><img src="images/06.png" alt=""></span>
        <span class="c-title3"><img src="images/05.png" alt=""></span>
    </ul>
        <div class="containera">
            <div class="row1">
                <div class="col-3 you">
                    <img src="images/17.jpg" alt="">
                    <p class="co-1">小米智能插座</p>
                    <p class="co-2">让普通家电变得智能</p>
                </div> 
                <div class="col-3 you">
                    <img src="images/18.jpg" alt="">
                    <p class="co-1">小米空气净化器</p>
                    <p class="co-2">高性能智能空气净化器立即预约</p>
                </div> 
                <div class="col-3 you">
                    <img src="images/19.jpg" alt="">
                    <p class="co-1">小米活塞耳机简装版</p>
                    <p class="co-2">好声音源自活塞式音腔，延续经典设计</p>
                </div> 
                <div class="col-3 ">
                    <img src="images/aa.jpg" alt="">
                    <p class="co-1">小米路由器</p>
                    <p class="co-2">顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
                </div> 
               
            </div>
            </div>
     


        <ul class="c-title">
            <li class="c-title1">新品上架</li>
            <span class="c-tit">更多 ></span>
           
        </ul>
            <div class="contain">
                <div class="row">
                    <div class="col-6">
                        <img src="images/20.jpg" alt="">
                    </div> 
                    <div class="col-3 you">
                        <div class="col-4-1-1">
                        <p class="wenzi">小米手环</p>
                        <p class="wenzi">79元</p>
                    </div>
                        <img src="images/21.jpg" alt="">
                    </div> 
               

                    <div class="col-left">
                        <div class="col-3-1">
                            <p class="tejia">特价商品</p>
                            <div class="text3">
                                <p >SanDisk32GB存储卡</p>
                                <span class="text3-1">79元</span><span class="text3-2">109元</span>
                                <p class="text3-3">还有更多商品特价</p>
                            </div>
                            <img src="images/22.jpg" alt=""></div>
                        <div class="col-3-1">
                                <div class="text3">
                                        <p >特惠配件套餐</p>
                                        <p class="text3-3">手机必备配件组合购买</p>
                                        <p class="text3-3">实惠更实惠</p>
                                    </div>
                            <img src="images/23.jpg" alt=""></div>
                        <div class="col-3-1 che">
                                <div class="text3">
                                        <p >我爱酷玩</p>
                                        <p class="text3-3">邂逅炫酷的电子产品</p>
                                        <p class="text3-3">结交趣味相投的朋友</p>
                                    </div>
                            <img src="images/24.jpg" alt=""></div> 



                                <table class="tb1">
                                    <tr></tr>
                                        <td>企业用户采购渠道<span>></span></td>
                                    </tr>
                                    <tr>
                                        <td>小米手机防伪查询<span>></span></td>
                                    </tr>
                                    <tr>
                                        <td>小米手机官方版<span>></span></td>
                                    </tr>
                                    <tr>
                                        <td>小米路由器官方版<span>></span></td>
                                    </tr>
                                    
                                    <tr>
                                        <td>小米红包<span>></span></td>
                                    </tr>
                                </table>
                                <form action="" class="for1">
                                        <p class="for-1">花费充值</p>
                                        <input type="text" placeholder="请输入手机号">
        
                                        <div class="form-group">
                                            <select class="form-control">
                                              <option>100元</option>
                                              <option>200元</option>
                                              <option>300元</option>
                                              <option>400元</option>
                                              <option>500元</option>
                                            </select>
                                            </div>
                                        <p class="for-2">实付价格98.4元起</p>
                                        <input type="button" value="立即充值" class="but">
                                       
                                       
                                    </form>
                         </div> 
                        </div>
                    </div>

                   
                   
                <div class="containerb">
                        <div class="row">
                            <div class="col-4 ">
                                <div class="col-4-1">
                                    <div class="col-4-1-1">
                                    <p>5周年米兔钥匙扣</p>
                                    <p>9.9元</p>
                                </div>
                                    <img src="images/25.png" alt="" class="img25"></div>
                                <div class="col-4-1">
                                        <div class="col-4-1-1">
                                        <p>QCY派Q8蓝牙耳机</p>
                                        <p>59.9元</p>
                                        </div>
                                    <img src="images/lanyaerji.png" class="erj"></div>
                               
                            </div> 
                            <div class="col-4">
                                    <div class="col-4-1-1">
                                            <p>小米T恤路标MILOGO</p>
                                            <p>39元</p>
                                        </div>
                                <img src="images/27.jpg" alt="">         
                            </div> 
                            <div class="col-4 ">
                                    <div class="col-4-1-1">
                                            <p>小米4实木后盖</p>
                                            <p>69元</p>
                                        </div>
                                    <img src="images/28.jpg" alt="">
                            </div> 
            
                        </div>
                        </div>

                        <div class="containerb">
                                <div class="row">
                                    <div class="col-4 ">
                                        <div class="col-4-1-1">
                                       <p>小米Note超薄保护套</p>
                                       <p>49元</p></div>
                                       <img src="images/baohuke.png" alt="" class="baoht">
                                    </div> 
                                    <div class="col-4">  
                                        <div class="col-4-1-1">                                   
                                                    <p>小米自拍杆</p>
                                                    <p>49元</p>   </div>                                          
                                        <img src="images/zipai.jpg" alt="">         
                                    </div> 
                                    <div class="col-4 ">
                                        <div class="col-4-1-1">
                                                    <p>先锋CL31系列耳式耳机</p>
                                                    <p>99元</p></div>
                                            <img src="images/hongerji.jpg" alt="">
                                    </div>
                                </div>
                                </div>
      
    </div>  

    <div class="footer">
        <div class="footer-1">
             
                <div class="col-20">
                    <img src="images/10.png" alt="">
                    <p>1小时快修服务</p>
                </div>
                <div class="col-20">
                    <img src="images/11.png" alt="">
                    <p>7天无理由退货</p>
                </div>
                <div class="col-20">
                    <img src="images/12.png" alt="">
                    <p>15天免费换货</p>
                </div>
                <div class="col-20">
                    <img src="images/13.png" alt="">
                    <p>满150元包邮</p>
                </div>
                <div class="col-20">
                    <img src="images/14.png" alt="">
                    <p>520余家售后网点</p>
               
            </div>
     
                   <div class="footer-2">
                    <div class="col-2">
                       <p class="first">帮助中心</p>
                       <p class="second">购物指南</p>
                       <p class="second">支付方式</p>
                       <p class="second">配送方式</p>
                    </div>
                    <div class="col-2 col-2-1">
                        <p class="first">服务支持</p>
                        <p class="second">售后政策</p>
                        <p class="second">自助服务</p>
                        <p class="second">相关下载</p>
                       
                      
                    </div>
                    <div class="col-2 col-2-1">
                        <p class="first">小米之家</p>
                        <p class="second">小米之家</p>
                        <p class="second">服务网店</p>
                        <p class="second">预约亲临到店服务</p>
                       
                    </div>
                    <div class="col-2 col-2-1">
                        <p class="first">关于小米</p>
                        <p class="second">了解小米</p>
                        <p class="second">加入小米</p>
                        <p class="second">联系我们</p>
                       
                    </div>
                    <div class="col-2 col-2-1">
                        <p class="first">关于我们</p>
                        <p class="second">新浪微博</p>
                        <p class="second">官方微信</p>
                       
                    </div>
                </div>
                    <div class="dianhua">
                        <p class="dh">400-100-5678</p>
                        <p class="dh-1">周一至周日 8:00-18:00</p>
                        <p class="dh-2">(仅收市话费)</p>
                        <input type="button" value="24小时在线服务">
                        
                </div>
                
                <div class="foo">
                    <p>小米旗下网站：<span><a href="#">小米网</a></span> <span>　|　</span> <span><a href="#">MIUI</a></span> <span>　|　</span><span><a href="#">米聊</a></span><span>　|　</span><span><a href="#">多看书城</a></span><span>　|　</span><span><a href="#">小米路由器</a></span><span>　|　</span><span><a href="#">繁体香港</a></span><span>　|　</span><span><a href="#">繁体台湾</a></span><span>　|　</span><span><a href="#">English</a></span><span>　|　</span><span><a href="#">小米后院</a></span><span>　|　</span><span><a href="#">小米天猫店</a></span><span>　|　</span><span><a href="#">小米淘宝直营店</a></span><span>　|　</span><span><a href="#">小米联盟</a></span></p>
                   <p>@mi.com 京ICP证110507号 京IPC备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
                   <div class="fimg"> <img src="images/16.png" alt=""></div>
                   <div class="form-group">
                    <select class="form-control select">
                      <option>简体中文</option>
                      <option>繁体中文</option>
                      <option>英文</option>
                    </select>
                    </div>
                        
                </div>
         </div>
        </div>

<script src="bootstrap/js/jquery-3.3.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
     
</body>
</html>